<template>
  <div class="info-card" :style="{top:show?'0px':'-500px'}">

    <div class="bar header-bar" v-if="show" @click="scroll"></div>

    <div class="content">

      <div class="main-content">
        <h2 class="title-huizong">{{ reports[active].allInfo != null ? reports[active].allInfo.proName : '' }}情况汇总</h2>
        <div class="over-content">
          <div class="charts" :style="{left:left+'px'}">
            <card-content></card-content>
          </div>
        </div>

        <div class="button-div">
          <button class="button" style="margin: 0 20px 0 20px;width: 50px" @click='previous' v-show="left!==0"><i
              class="iconfont icon-Cartoon-Arrow-Left"></i></button>
          <button class="button" style="margin: 0 20px 0 20px;width: 50px" @click='next' v-show="left!==-1035"><i
              class="iconfont icon-Cartoon-Arrow-Right"></i></button>
        </div>


      </div>
      <div class="simple-content">

        <div class="share-data">
          <ul>
            <li>
              <div class="share-name">{{ reports[active].areaName }}</div>
            </li>
            <li>
              <p class="share-yesterday"><span style="color: #3e1100">近30天</span><span
                  class="num">{{ reports[active].recentWeekConfirm >= 0 ? '+ ' : '- ' }}{{
                  reports[active].recentWeekConfirm
                }}</span></p>

              <p class="share-num">{{ reports[active].confirm }}</p>
              <span class="share-info">总确诊数({{cname}})</span>
            </li>
            <li>
              <p class="share-yesterday">️较昨日<span
                  class="num">{{ reports[active].todayStoreConfirm >= 0 ? '+ ' : '- ' }}{{
                  reports[active].todayStoreConfirm
                }}</span></p>
              <p class="share-num">{{ reports[active].storeConfirm }}</p>
              <span class="share-info">现有确诊({{cname}})</span>
            </li>
            <li>
              <p class="share-yesterday">较昨日<span
                  class="num">{{ reports[active].todayDead >= 0 ? '+ ' : '-  ' }}{{ reports[active].todayDead }}</span>
              </p>
              <p class="share-num">{{ reports[active].dead }}</p>
              <span class="share-info">死亡数({{cname}})</span>
            </li>
            <li>
              <p class="share-yesterday">️较昨日<span
                  class="num">{{ reports[active].todayHeal >= 0 ? '+ ' : '- ' }}{{ reports[active].todayHeal }}</span>
              </p>
              <p class="share-num">{{ reports[active].heal }}</p>
              <span class="share-info">治愈数({{cname}})</span>
            </li>
            <li>
              <p class="share-yesterday">较昨日<span
                  class="num">{{ reports[active].todayInput >= 0 ? '+ ' : '- ' }}{{
                  reports[active].todayInput
                }}</span>
              </p>
              <p class="share-num">{{ reports[active].input }}</p>
              <span class="share-info">境外输入({{cname}})</span>
            </li>

          </ul>
        </div>
      </div>
    </div>

    <div class="bar footer-bar" v-if="barShow"
         @click="scroll"></div>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import CardContent from "@/views/CardContent";

export default {
  name: "Card",
  components: {CardContent},
  data() {
    return {
      pieConfirmChart: null,
      left: 0
    }
  },
  computed: {
    ...mapState(['reports', 'active', 'show', 'loading']),
    barShow() {
      return (!this.show && this.reports[this.active].level !== -1 && this.reports[this.active].allInfo != null && !this.loading)
    },
    cname() {
      if (this.reports[this.active].level === 1) {
        return "市"
      } else if (this.reports[this.active].level === 0) {
        return "省"
      } else {
        return "国"
      }
    }
  },
  methods: {
    ...mapMutations(['setShow']),
    scroll() {
      if (this.show) {
      } else {
        if (!this.reports[this.active].allInfo) {
          return
        }
      }
      this.setShow(!this.show)
    },
    next() {
      if (this.left - 345 > -1035) {
        this.left -= 345
      } else {
        this.left = -1035
      }

    },
    previous() {
      if (this.left + 345 < 0) {
        this.left += 345
      } else {
        this.left = 0
      }
    }
  },
  mounted() {

  }

}
</script>

<style lang="less">
.info-card {
  position: absolute;
  display: flex;
  margin: 0 260px 0 0;
  justify-content: center;
  width: 740px;
  height: 660px;
  border-radius: 10px;
  background-color: var(--background-card-color);
  z-index: 999;
  transition: top 0.5s ease;

  .main-content {
    position: absolute;
    top: 4%;
    background-color: var(--background-info-color);
    width: 690px;
    height: 470px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);


    .over-content {
      width: 670px;
      height: 360px;
      margin: 10px;
      overflow: hidden;
    }

    .charts {
      position: relative;
      width: 2000px;
      height: 360px;
      transition: all .5s ease;
    }

    .button-div {
      position: absolute;
      bottom: 10px;
      width: 50%;
      left: 25%;

      .iconfont {
        font-size: 20px;
      }

    }

  }

  .simple-content {
    position: absolute;
    background-color: var(--background-info-color);
    box-shadow: var(--box-shadow);
    width: 690px;
    height: 120px;
    border-radius: 10px;
    bottom: 4%;
  }

  .content {
    display: flex;
    flex-direction: column;
    width: 690px;
    height: 600px;
    border-radius: 10px;
  }

  .footer-bar {
    bottom: 1.2%;
  }

  .header-bar {
    top: 1.3%;
  }

  .bar {
    position: absolute;
    height: 10px;
    width: 40%;
    left: 30%;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: var(--bar-color);
  }

  .bar:hover {
    background-color: var(--bar-hover-color);
  }

}

.share-data {
  border-radius: 8px;
  margin: 10px 0 10px 0;
  padding: 10px;

  h2 {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
  }

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 83px;

      .share-yesterday {
        font-size: 10px;
        color: var(--minor-font-color);

        .num {
          color: var(--assist-color);
        }
      }

      .share-num {
        font-size: 21px;
        font-weight: 700;
        color: var(--font-color);
        margin: 10px 0;
      }

      .share-name {
        width: 200px;
        height: 83px;
        overflow: hidden;
        font-size: 23px;
        font-weight: 700;
        color: var(--font-color);
        margin: 10px 0;
      }

      .share-info {
        font-size: 12px;
        color: var(--subdominant-font-color);
      }
    }
  }
}

.title-huizong {
  margin-top: 20px;
}
</style>